<template>
  <div>
    <div>
      <van-nav-bar title="房间" left-arrow @click-left="entrance">
        <template #right>
          <van-icon name="search" size="18" />
        </template>
      </van-nav-bar>
    </div>
    <div class="my_chengbox">
      <div>
        <span>客厅</span>
      </div>
      <div class="my_cheng">
        <div class="my_cheng1">
          <img src="../../../../public/image/headimg/head (1).png" alt="">
          <p class="my_ming">迪南</p>
          <p>管理员</p>
        </div>
        <div class="my_cheng1">
          <img src="../../../../public/image/headimg/head (2).png" alt="">
          <p class="my_ming">姐姐</p>
          <p>全部权限</p>
        </div>
        <div class="my_cheng1">
          <img src="../../../../public/image/headimg/head (3).png" alt="">
          <p class="my_ming">爸爸</p>
          <p>全部权限</p>
        </div>
        <div class="my_cheng1">
          <img src="../../../../public/image/headimg/head (5).png" alt="">
          <p class="my_ming">妈妈</p>
          <p>全部权限</p>
        </div>
      </div>
      <div class="my_content">
        <span>设置</span>
        <div class="my_content1">
          <span>允许远程访问</span>
          <van-switch v-model="checked1" active-color="#7033FF" inactive-color="#FB8F66" />
        </div>
        <div class="my_content1">
          <span>允许编辑</span>
          <van-switch v-model="checked2" active-color="#7033FF" inactive-color="#FB8F66" />
        </div>
        <div class="my_content1">
          <span>允许添加成员</span>
          <van-switch v-model="checked3" active-color="#7033FF" inactive-color="#FB8F66" />
        </div>
        <div class="my_shan">
          <span>账户</span>
          <div class="my_content2">
            <span>移除成员</span>
            <van-switch v-model="checked4" active-color="#7033FF" inactive-color="#FB8F66" />
          </div>
        </div>
        <div>
          <van-button color="linear-gradient(90deg, #fb8f66 0%, #7033ff 100%)" @click="log">
            保存
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from '../../../router/index.ts'
import { ref } from 'vue'
const checked1 = ref(false)
const checked2 = ref(true)
const checked3 = ref(false)
const checked4 = ref()

const entrance = () => {
  router.push('./entrance')
}

const log = () => {
  router.push('./Hello')
}
</script>

<style scoped lang="scss">
.my_chengbox {
  padding: 1rem;

  .my_cheng {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;

    .my_cheng1 {
      text-align: center;
      color: #ABA3CF;
    }

    .my_ming {
      color: #352C5D;
    }
  }

  .my_content {
    padding: 1rem;
    margin-top: 2rem;

    .my_content1 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #ABA3CF;
      line-height: 5rem;
      border-bottom: 0.1rem solid #F6F5FA;
    }

    .my_shan {
      margin-top: 2rem;

      .my_content2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #ABA3CF;
        line-height: 5rem;
      }
    }

    .van-button {
      width: 25.5rem;
      margin-top: 5rem;
      margin-left: 5rem;
    }
  }
}
</style>